import React, { Component } from "react";
// createContext是一个函数

import Child2 from "./Child2";

// 执行以后可以返回一个context对象
// const context = createContext();
// //      提供者      消费者
// // 这两个都是组件
// // 如果要做跨组件通信，那么Provider, Consumer需要从同一个context里面解构
// const { Provider, Consumer } = context;

import context from "./context";
const { Provider, Consumer } = context;

class Child1 extends Component {
  render() {
    return (
      <>
        <div>
          child1组件 -{" "}
          <Consumer>{(value) => <span>{value.msg}</span>}</Consumer>
        </div>
        <Child2 />
      </>
    );
  }
}

class App extends Component {
  state = {
    count: 10,
    msg: "hello",
  };
  fn = () => {
    this.setState({
      count: 20,
    });
  };
  render() {
    return (
      // Provider写的位置是在需要传递数据的父组件的外侧
      // Provider必须要有一个属性，value属性，value属性的属性值就是我们要传递的值
      <Provider
        value={{
          count: this.state.count,
          msg: this.state.msg,
        }}
      >
        <h2>context跨组件传参</h2>
        <p>
          app-count: {this.state.count} - <button onClick={this.fn}>btn</button>
        </p>
        <Child1 />
      </Provider>
    );
  }
}

export default App;
